<template>
  <div class="box">
    <div class="user"><a-avatar icon="user" /></div>
    <div class="text">
      <div class="name">
        <span>{{ progressData.name }}</span>
      </div>
      <div class="department">
        <span>{{ progressData.secondDepartment }}</span>
      </div>
    </div>
    <div class="bar">
      <div class="progressBar" ref="progressBar"></div>
      <div class="count">
        <span>{{ progressData.count }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Progress",
  props: {
    maxCount: Number,
    progressData: Object
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    setBarWidth() {
      let width = "";
      let maxWidth = 300;
      let maxCount = parseInt(this.maxCount);
      let currentCount = parseInt(this.progressData.count);
      width = Math.ceil((maxWidth * currentCount) / maxCount) + "px";
      console.log(width);
      this.$refs.progressBar.style.width = width;
    }
  },
  created() {},
  mounted() {
    console.log(this.progressData);
    console.log(this.maxCount);
    console.log("mounted progressData");
    this.setBarWidth();
  },
  destroyed() {}
};
</script>

<style scoped="scoped">
.box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.user {
  margin-right: 16px;
}

.text {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 140px;
}

.bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.text > .name {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1e1e1e;
  margin-right: 8px;
}

.text > .department {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #777777;
}

.bar > .progressBar {
  width: 300px;
  height: 16px;
  background: #1890ff;
  border-radius: 8px;
  margin-right: 8px;
}

.bar > .count {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1e1e1e;
}
</style>
